<template>
  <div class="container">
    <!-- 筛选区域 -->
    <div class="filter-container">
      <el-row :gutter="20" justify="center" align="middle">
        <el-col :xs="24" :sm="12" :md="6" :lg="4">
          <el-input v-model="searchKeyword" placeholder="搜索农产品" :prefix-icon="Search" clearable @input="handleSearch"
            class="search-input" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="4">
          <el-select v-model="selectedCategory" placeholder="全部分类" clearable class="category-select">
            <el-option v-for="item in categories" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>
      </el-row>
    </div>

    <!-- 商品展示区域 -->
    <div class="goods-container">
      <div v-for="product in filteredProducts" :key="product.id" class="product-box">
        <el-card shadow="hover" class="product-card">
          <div class="content-wrapper">
            <!-- 左侧图文信息 -->
            <div class="product-media">
              <img :src="product.image" :alt="product.name" class="product-image" />
              <div class="origin-tag">
                <el-icon>
                  <Location />
                </el-icon>
                <span>{{ product.origin }}</span>
              </div>
            </div>
            <!-- 右侧详细信息 -->
            <div class="product-details">
              <h2 class="product-title">{{ product.name }}</h2>
              <div class="product-meta">
                <div class="meta-item">
                  <el-icon>
                    <Star />
                  </el-icon>
                  <span class="meta-label">产品特色：</span>
                  <span class="meta-content">{{ product.features }}</span>
                </div>
                <div class="meta-item">
                  <el-icon>
                    <Leaves />
                  </el-icon>
                  <span class="meta-label">核心品质：</span>
                  <span class="meta-content">{{ product.quality }}</span>
                </div>
                <div class="policy-banner">
                  <el-icon>
                    <Opportunity />
                  </el-icon>
                  <span>国家地理标志产品 · {{ product.policySupport }}</span>
                </div>
                <div class="producer-info">
                  <h3>农人故事</h3>
                  <p>{{ product.producerStory }}</p>
                </div>
              </div>
              <!-- 购买按钮 -->
              <div class="action-bar">
                <el-button type="success" class="buy-button" @click="goPurchase(product)">
                  <el-icon>
                    <ShoppingCart />
                  </el-icon>
                  支持助农 · 立即购买
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div v-if="filteredProducts.length === 0" class="no-result">
        未找到相关农产品
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
// 引入所需图标

const router = useRouter();

// 定义 Product 接口，添加 price 属性
interface Product {
  id: number;
  name: string;
  origin: string;
  features: string;
  quality: string;
  policySupport: string;
  producerStory: string;
  image: string;
  category: string;
  price: number;
}

// 示例数据添加 price 属性
const products: Product[] = [
  {
    id: 1,
    name: '烟台红富士苹果',
    origin: '山东烟台',
    features: '霜降后采摘，果糖自然沉淀',
    quality: '脆度≥8.2，糖度14° - 16°',
    policySupport: '乡村振兴重点扶持项目',
    producerStory: '张大叔家族三代种植，采用传统有机肥培育，坚持人工除草物理防虫',
    image: 'https://example.com/apple.jpg',
    category: '水果',
    price: 10
  },
  {
    id: 2,
    name: '五常生态大米',
    origin: '黑龙江五常',
    features: '黑土地孕育，一年一季稻',
    quality: '直链淀粉含量15% - 18%',
    policySupport: '国家地理标志保护产品',
    producerStory: '王大姐合作社采用鸭稻共作模式，连续6年通过有机认证',
    image: 'https://example.com/rice.jpg',
    category: '粮油',
    price: 20
  }
];

// 筛选条件
const searchKeyword = ref('');
const selectedCategory = ref('');
const priceRange = ref<[number | null, number | null]>([null, null]);

// 商品分类选项
const categories = [
  { value: '水果', label: '水果' },
  { value: '蔬菜', label: '蔬菜' },
  { value: '禽蛋', label: '禽蛋' },
  { value: '肉类', label: '肉类' },
  { value: '粮油', label: '粮油' }
];

// 复合过滤逻辑
const filteredProducts = computed(() => {
  return products.filter(product => {
    // 关键词匹配（名称）
    const keywordMatch = !searchKeyword.value ||
      product.name.toLowerCase().includes(searchKeyword.value.toLowerCase());

    // 分类匹配
    const categoryMatch = !selectedCategory.value || product.category === selectedCategory.value;

    // 价格区间匹配
    const [minPrice, maxPrice] = priceRange.value;
    const price = product.price;
    const priceMatch =
      (minPrice === null || price >= minPrice) &&
      (maxPrice === null || price <= maxPrice);

    return keywordMatch && categoryMatch && priceMatch;
  });
});

// 路由跳转
const goGoodsDetail = (id: number) => {
  router.push({ name: 'goodsDetail', params: { id } });
};

// 搜索处理（可添加防抖）
const handleSearch = () => {
  // 防抖逻辑...
};

// 定义 goPurchase 方法
const goPurchase = (product: Product) => {
  // 这里可以添加购买逻辑，例如跳转到购买页面
  console.log('购买商品:', product.name);
};
</script>

<style scoped lang="scss">
.filter-container {
  margin-bottom: 20px;
  /* 添加边距 */
}

.product-box {
  margin-bottom: 30px;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-3px);
  }
}

.product-card {
  border-radius: 12px;
  overflow: hidden;

  :deep(.el-card__body) {
    padding: 0;
  }
}

.content-wrapper {
  display: flex;
  min-height: 400px;
}

.product-media {
  position: relative;
  flex: 0 0 45%;
  background: #f8f9fa;

  .product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .origin-tag {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #2c3e50;
    font-weight: 500;
  }
}

.product-details {
  flex: 1;
  padding: 30px 40px;
  position: relative;
}

.product-title {
  color: #1a5632;
  font-size: 28px;
  margin-bottom: 25px;
  border-bottom: 2px solid #e8f5e9;
  padding-bottom: 15px;
}

.meta-item {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;

  .meta-label {
    color: #1a5632;
    font-weight: 500;
    min-width: 90px;
  }

  .meta-content {
    color: #4a6657;
    line-height: 1.6;
  }
}

.policy-banner {
  background: #f0faf3;
  padding: 15px;
  border-radius: 8px;
  margin: 25px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2a7d2e;
  font-weight: 500;
}

.producer-info {
  background: #fff9f2;
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;

  h3 {
    color: #8d6e63;
    margin-bottom: 10px;
  }

  p {
    color: #a1887f;
    line-height: 1.8;
  }
}

.action-bar {
  position: absolute;
  bottom: 30px;
  right: 40px;

  .buy-button {
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 16px;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);

    &:hover {
      transform: scale(1.05);
    }
  }
}

.no-result {
  text-align: center;
  padding: 50px 0;
  font-size: 18px;
  color: #666;
}
</style>